<template>
    <div class="scoreAll">
        <div class="basicInfo">
            <span>赛事名称：<b>xxx夏季网球大赛</b></span>
            <span>裁判长：<b>刘德华</b></span>
            <div class="btnGroup">
                <el-button type="primary" class='goMatchForm'>导出成绩表</el-button>
                <el-button type="info" plain  @click='goback'>返回</el-button>
            </div>
        </div>
        <div class="tableBox">
            <ul class="group">
                <li :class='{isGroup:isGroup==0}' @click='isGroup=0'>
                    青年组男单<span class='peopleNum'>（16）</span>
                </li>
                <li :class='{isGroup1:isGroup==1}' @click='isGroup=1'>
                    青年组男单<span class='peopleNum'>（16）</span>
                </li>
                <li>
                    青年组男单<span class='peopleNum'>（16）</span>
                </li>
                <li>
                    青年组男单<span class='peopleNum'>（16）</span>
                </li>
                <li>
                    青年组男单<span class='peopleNum'>（16）</span>
                </li>
                <li :class='{isGroup1:isGroup==2}'  @click='isGroup=2'>
                    青年组男单<span class='peopleNum'>（16）</span>
                </li>
            </ul>
            <div class="tableMain">
                <div class="scoreBox">
                    <ul class="rankStart">
                        <li v-for='(item,index,key) in rankList.rankStart' :key='key'>
                            <span class='name'>
                                {{item}}
                            </span>
                        </li>
                    </ul>
                     <ul class="rankFirst">
                        <li>第一轮</li>
                        <li v-for='(item,index,key) in rankList.rankFirst' :key='key'>
                            <span class='name'>
                                {{item}}
                            </span>
                        </li>
                    </ul>
                     <ul class="rankSecond">
                        <li>1/4决赛</li>
                        <li v-for='(item,index,key) in rankList.rankSecond' :key='key'>
                            <span class='name'>
                                {{item}}
                            </span>
                        </li>
                    </ul>
                    <ul class="rankThird">
                        <li>半决赛</li>
                        <li v-for='(item,index,key) in rankList.rankThird' :key='key'>
                            <span class='name'>
                                {{item}}
                            </span>
                        </li>
                    </ul>
                    <ul class="rankFourth">
                        <li>决赛</li>
                        <li v-for='(item,index,key) in rankList.rankFourth' :key='key'>
                            <span class='name'>
                                {{item}}
                            </span>
                            <span class='champion'>第一名</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                rankList:{
                    rankStart:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16],
                    rankFirst:[1,2,3,4,5,6,7,8],
                    rankSecond:[1,2,3,4],
                    rankThird:[1,2],
                    rankFourth:[1]
                },
                isGroup:0,
            }
        },
        methods:{
            diy(){
                this.hasDiy = true;
            },
            cancle(){
                this.hasDiy = false;
            },
            goback(){

            }
        }
    }
</script>
<style lang="less" scoped>
//
.isGroup{
    border-right:1px solid #eaeaea;
    border-bottom:0;
    background-color: #fff;
    color:#409EFF!important;
}
.isGroup1{
    border-right:1px solid #eaeaea;
    border-left:1px solid #eaeaea;
    border-bottom:0;
    background-color: #fff;
    color:#409EFF!important;
}
//
.scoreAll{
    padding:20px;
    .basicInfo{
        background: rgba(66,185,131,.1);
        border-radius: 2px;
        line-height: 40px;
        height: 40px;
        padding: 15px;
        overflow: hidden;
        span{
            margin-right:20px;
        }
        .btnGroup{
            height: 60px;
            float: right;
            margin-right:20px;
        }
    }
    .tableBox{
        box-shadow: 0px 2px 5px #eaeaea;
        margin-top:20px;
        border:1px solid #eaeaea;
        padding-bottom:10px;
        .group{
            height: 40px;
            background-color: #F5F7FA;
            border-bottom: #727272;
            li{
                float: left;
                cursor: pointer;
                height: 40px;
                line-height: 40px;
                text-align: center;
                color:#727272;
                padding:0 10px;
            }
            li:hover{
                color:#409EFF;
            }
        }
        .tableMain{
            margin-top:20px;
            padding:0 20px;
            padding-bottom: 20px;
            .scoreBox{
                width: 100%;
                display: flex;
                justify-content: flex-start;
                .rankStart{
                    padding-left:80px;
                    li{
                        width: 220px;
                        height: 40px;
                        border-bottom: 1px solid #727272;
                        position:relative;
                        .name{
                            display: inline-block;
                            height: 30px;
                            line-height: 30px;
                            width: 80px;
                            text-align: center;
                            position: absolute;
                            border:1px solid #727272;
                            bottom: -15px;
                            left:-82px;
                        }
                    }
                    li:nth-child(even){
                        border-right:1px solid #727272;
                    }
                    li:nth-child(odd){
                        width: 221px;
                    }
                }
                .rankFirst{
                    border-left:1px solid #eaeaea;
                    position: relative;
                    li{
                        width: 220px;
                        height: 81px;
                        border-bottom: 1px solid #727272;
                        position:relative;
                        .name{
                            display: inline-block;
                            width: 220px;
                            text-align: center;
                            position: absolute;
                            bottom: 0px;
                            left:0px;
                        }
                    }
                    li:nth-child(2){
                        height: 61px;
                    }
                    li:nth-child(odd){
                        border-right:1px solid #727272;
                    }
                    li:nth-child(even){
                        width: 221px;
                    }
                    li:first-child{
                        position: absolute;
                        border:0;
                        text-align: center;
                    }
                }
                 .rankSecond{
                    border-left:1px solid #eaeaea;
                    position: relative;
                    li{
                        width: 220px;
                        height: 162px;
                        border-bottom: 1px solid #727272;
                        position:relative;
                        .name{
                            display: inline-block;
                            width: 220px;
                            text-align: center;
                            position: absolute;
                            bottom: 0px;
                            left:0px;
                        }
                    }
                    li:nth-child(2){
                        height: 102px;
                    }
                    li:nth-child(odd){
                        border-right:1px solid #727272;
                    }
                    li:nth-child(even){
                        width: 221px;
                    }
                    li:first-child{
                        position: absolute;
                        border:0;
                        text-align: center;
                    }
                }
                 .rankThird{
                    border-left:1px solid #eaeaea;
                    position: relative;
                    li{
                        width: 220px;
                        height: 324px;
                        border-bottom: 1px solid #727272;
                        position:relative;
                        .name{
                            display: inline-block;
                            width: 220px;
                            text-align: center;
                            position: absolute;
                            bottom: 0px;
                            left:0px;
                        }
                    }
                    li:nth-child(2){
                        height: 182px;
                    }
                    li:nth-child(odd){
                        border-right:1px solid #727272;
                    }
                    li:nth-child(even){
                        width: 221px;
                    }
                    li:first-child{
                        position: absolute;
                        border:0;
                        text-align: center;
                    }
                }
                 .rankFourth{
                    border-left:1px solid #eaeaea;
                    position: relative;
                    li{
                        width: 220px;
                        height: 648px;
                        border-bottom: 1px solid #727272;
                        position:relative;
                        .name{
                            display: inline-block;
                            width: 220px;
                            text-align: center;
                            position: absolute;
                            bottom: 0px;
                            left:0px;
                        }
                        .champion{
                            display: inline-block;
                            width: 80px;
                            position: absolute;
                            left:226px;
                            top:348px;
                        }
                    }
                    li:nth-child(2){
                        height: 358px;
                    }
                    li:nth-child(odd){
                        border-right:1px solid #727272;
                    }
                    li:nth-child(even){
                        width: 221px;
                    }
                    li:first-child{
                        position: absolute;
                        border:0;
                        text-align: center;
                    }
                }
            }
        }
    }
}
</style>

